<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="../head.jsp"></jsp:include>

    <style>
        .layui-table-cell{
            height:36px;
            line-height: 36px;
        }

        .head{
            margin: 10px 20px;
            background: white;
            padding: 10px 20px 1px 20px;
            box-shadow: 0px 0px 5px darkgrey;
        }

        #dialog{
            margin: 20px;
            padding: 10px 10px 1px 10px;
            background: white;
            /*display: none;*/
        }

        .content{
            margin: 10px 20px;
            background: white;
            padding: 10px 20px 10px 20px;
        }
    </style>
</head>
<body>

<div class="container head">
    <form action="" class="layui-form">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" name="searchValue" lay-verify="required" autocomplete="off" placeholder="请输入昵称/电话/邮箱" class="layui-input">
            </div>
            <div class="layui-form-inline">
                <button class="layui-btn" lay-submit lay-filter="searchBtn">搜索</button>
                <button class="layui-btn layui-btn-normal" type="button" id="addBtn">添加</button>
            </div>
        </div>
    </form>
</div>

<div class="container content">
    <table class="layui-hide" id="user" lay-filter="user"></table>
</div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="resetPwd">重置密码</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="remove">删除</button>
    </div>
</script>

<script type="text/html" id="dialogHtml">
<div id="dialog">
    <form action="" class="layui-form" lay-filter="dialog-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required|name" autocomplete="off" placeholder="请输入名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" lay-verify="required|phone" autocomplete="off" placeholder="请输入名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" lay-verify="required|email" autocomplete="off" placeholder="请输入名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked>
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-block">
                <select name="dept" id="dept" lay-verify="required" lay-filter="dept">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <select name="role" id="role" lay-verify="required" lay-filter="role">
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="display: none">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="dialogBtn" id="dialogBtn">提交</button>
            </div>
        </div>
    </form>
</div>
</script>

<script src="/static/layui/layui.js"></script>
<script>
    layui.use(['table','form','tree'], function(){
        var table = layui.table;
        var form = layui.form;
        var tree = layui.tree;
        var layerIdx;
        var flag = 'add';

        initTable();

        form.on('submit(searchBtn)', function(data){
            search(data.field)
            return false;
        })

        form.on('submit(dialogBtn)', function(data){
            var formData = data.field;
            var roleId = formData.role
            var deptId = formData.dept
            formData.role = {
                roleId:roleId
            }
            formData.dept = {
                deptId:deptId
            }
            console.log(formData)
            update(formData,flag)
            return false;
        })

        form.verify({
            name: function(value, item){
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '角色名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '角色名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '角色名不能全为数字';
                }
                if(value.length <= 1){
                    return '角色名长度至少2个字符';
                }
            }
        });

        //监听工具条
        table.on('tool(user)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            console.log(data)
            if(layEvent === 'remove'){ //删除
                layer.confirm('真的删除？', function(index){
                    remove(data);
                });
            } else if(layEvent === 'resetPwd'){
                layer.confirm('要重置密码为电话后6位吗？', function(index){
                    resetpwd(data.id);
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){ //编辑
                flag = 'edit';
                showDialog(data);
            }
        });

        $('#addBtn').click(function () {
            flag = 'add';
            showDialog();
        })

        // 更新
        function update(userData,flag) {

            var url = flag == 'add'?'/user/add':'/user/update';
            $.ajax({
                url: url,
                dataType: 'json',
                data:JSON.stringify(userData),
                type: 'POST',
                contentType:'application/json',
                success: function (res) {
                    if(res.code == 200){
                        reloadTable();
                        if(layerIdx) layer.close(layerIdx);
                    }else{
                        layer.msg(res.msg,{icon:5,time:1000})
                    }
                }
            })
        }

        function resetpwd(id) {
            $.ajax({
                url:'/user/resetPwd',
                data:{id:id},
                success:function (res) {
                    if(res.code != 200){
                        layer.msg(res.msg,{icon:5,time:1000})
                    }
                }
            })
        }

        function remove(data) {
            $.ajax({
                url:'/user/delete',
                data:{id:data.id},
                type:"POST",
                success:function (res) {
                    if(res.code == 200){
                        reloadTable();
                        layer.msg('删除成功',{icon:6,time:1000})
                    }else{
                        layer.msg(res.msg,{icon:5,time:1000})
                    }
                }
            })
        }

        function search(searchData){
            table.reload('user', {
                url: '/user/search'
                ,where:searchData
                ,page: {
                    curr: 1
                }
            });
        }

        function showDialog(user) {
            initDialogForm(user);
            layerIdx = layer.open({
                type: 1,
                area: ['400px', '500px'],
                title:'添加',
                btn: ['提交'],
                content: $('#dialogHtml').html(),
                yes:function(){
                    $('#dialogBtn').click();
                }
            });
        }

        function initDialogForm(user){
            console.log(user)

            $.ajax({
                url: '/dept/all',
                dataType: 'json',
                type: 'get',
                success: function (res) {
                    $('#dept').append(new Option('无', 0));
                    $.each(res.data, function (index, item) {
                        $('#dept').append(new Option(item.deptName, item.deptId));// 下拉菜单里添加元素
                    });
                    form.render("select");
                }
            })

            $.ajax({
                url: '/role/all',
                dataType: 'json',
                type: 'get',
                success: function (res) {
                    $('#role').append(new Option('无', 0));
                    $.each(res.data, function (index, item) {
                        $('#role').append(new Option(item.roleName, item.roleId));// 下拉菜单里添加元素
                    });
                    $('#role option[value="1"]').attr('disabled','disabled')
                    form.render("select");
                    if(user){
                        form.val("dialog-form",{
                            "id":user.id,
                            "name":user.name,
                            "phone":user.phone,
                            "email":user.email,
                            "sex":user.sex,
                            "dept":user.dept.deptId,
                            "role":user.role.roleId
                        })
                    }
                    form.render()
                }
            })
        }

        function initTable(){
            table.render({
                elem: '#user'
                ,url:'/user/list'
                ,cols: [[
                    {field:'id', width:80, title: 'ID', sort: true}
                    ,{field:'name', title: '昵称'}
                    ,{field:'dept', title: '部门',templet:function (d) { return d.dept.deptName }}
                    ,{field:'role', title: '角色',templet:function (d) { return d.role.roleName }}
                    ,{field:'sex', title: '性别'}
                    ,{field:'phone', title: '电话'}
                    ,{field:'email', title: '邮箱'}
                    ,{title:'操作', toolbar: '#toolbar', width:200}
                ]]
                ,page: true
            });
        }

        function reloadTable() {
            table.reload('user', {
                url: '/user/list'
            });
        }

    });
</script>
</body>
</html>
